<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <template #header> 
          <TreeTools @addDepts="addDepts" :treeNode="company" is-root/>
        </template>
        <!-- 该缩写只在其有参数的时候才可用 #='{data}' 是不可以用的 -->
        <template #default>
          <el-tree empty-text="数据加载中" ref="tree" v-slot="{ data }" :data="data" :props="defaultProps">
            <TreeTools @editDepts="editDepts" @addDepts="addDepts" @delSuccess="delSuccess" :tree-node="data" />
          </el-tree>
        </template>
      </el-card>
      <AddDept @addDeptsSuccess="addDeptsSuccess" :show-dialog.sync="showDialog" :tree-node="node"/>
      <EditDept @updateDeptsSuccess="updateDeptsSuccess" :edit-show-dialog.sync="editShowDialog"  :tree-node="node"/>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools'
import { getDepartments } from '@/api/departments'
import { tranListToTreeDataByLodash } from '@/utils'
import AddDept from './components/add-depts.vue'
import EditDept from './components/edit-depts.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept,
    EditDept
  },
  data() { 
    return {
      // company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      // data: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
      //   { name: '行政部', manager: '刘备' },
      //   { name: '人事部', manager: '孙权' }],
      company: {name:null,manager:null},
      data:[],
      defaultProps: {
        label:'name'
      },
      showDialog: false,
      node: null,
      editShowDialog:false
    }
  },
  created() { 
    
  },
  mounted() { 
    this.getDepartments()
  },
  methods: {
    async getDepartments() { 
      const result = await getDepartments(this.$refs.tree.$el)
      this.company = {
        name: result?.companyName,
        manager: result?.companyManage ? result?.companyManage : '管理员',
        id:result?.id ? result?.id:''
      }
      // this.data = tranListToTreeDataByRecursion(result?.depts, '')
      this.data = tranListToTreeDataByLodash(result?.depts, 'pid', '')
    },
    // 添加部门事件
    addDepts(node) { 
      this.showDialog = true //显示弹层
      // 因为node是当前点击的部门，此时这个部门应该记录下来方便后续的使用
      this.node = node
    },
    // 删除成功事件
    delSuccess() { 
      this.getDepartments()
      this.$message({
        message: '删除成功',
        type: 'success'
      })
    },
    // 添加成功事件
    addDeptsSuccess() { 
      this.getDepartments()
      this.$message({
        message: '添加部门成功',
        type: 'success'
      })
    },
    updateDeptsSuccess() { 
      this.getDepartments()
      this.$message({
        message: '编辑部门成功',
        type: 'success'
      })
    },
    // 编辑部门事件
    editDepts(node) { 
      this.editShowDialog = true //显示弹层
      // 因为node是当前点击的部门，此时这个部门应该记录下来方便后续的使用
      this.node = node
    }
  }
}
</script>

<style lang="scss" scoped>
  .tree-card {
        padding: 30px 140px;
        font-size: 14px;
  }
</style>